/*
 * @Author: jiu yin
 * @Date: 2024-05-07 14:09:35
 * @LastEditTime: 2024-06-13 12:03:20
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\comment\ScanModal\index.tsx
 * jiu
 */
import codeStart from "@/assets/image/codeStart.png";
import codeStop from "@/assets/image/codeStop.png";

import { CloseOutlined } from "@ant-design/icons";
import { debounce } from "lodash";
import { useEffect, useRef, useState } from "react";
import "./index.scss";
export default function ScanModal(props: any) {
	let { isModalOpen, scan_ticket, title } = props;
	let container = useRef<any>(null);
	let [is_focus, set_is_focus] = useState(true);
	// 扫码枪
	useEffect(() => {
		document.addEventListener("keydown", keypress_fn);
		container.current.addEventListener("focus", focus_fn);
		container.current.addEventListener("blur", blur_fn);
		container.current.focus();

		return () => document.removeEventListener("keydown", keypress_fn);
	}, [container.current]);

	let start_time = null as any;
	let value = "";
	let value_length = 24;
	let interval_time = 300; // 扫码间隔时间

	let keypress_fn = (e: any) => {
		console.log(e);
		if (start_time && Date.now() - start_time > interval_time) {
			value = "";
			console.log(value, "清空");
			return (start_time = null);
		}
		if (special_char.includes(e.key)) return;

		if (e.code == "Enter" && value.length) {
			scan_ticket(value);
			value = "";
			start_time = null;
			console.log("提交,", value);
		} else {
			value += e.key;
			start_time = Date.now();
			console.log("添加,", value);
		}
	};
	let focus_fn = () => {
		set_is_focus(true);
		console.log("聚焦");
	};
	let blur_fn = () => {
		set_is_focus(false);
		console.log("失焦");
	};
	//键盘特殊字符
	let special_char = [
		"Escape",
		"Tab",
		"CapsLock",
		"Shift",
		"Control",
		"Alt",
		"Backspace",
		"Delete",
		"ArrowUp",
		"ArrowDown",
		"ArrowLeft",
		"ArrowRight",
		"Home",
		"End",
		"PageUp",
		"PageDown",
		"Insert",
		"F1",
		"F2",
		"F3",
		"F4",
		"F5",
		"F6",
		"F7",
		"F8",
		"F9",
		"F10",
		"F11",
		"F12",
	];

	return (
		<div className="fixed left-0 top-0 w-100vw h-100vh bg-transparent z-100">
			<div className="absolute left-50% translate-x--25% top-50px " ref={container} tabIndex={-1}>
				{is_focus ? (
					<section className="start w-560px h-202px flex items-center relative">
						<div
							className="absolute right-20px top-16px cursor-pointer"
							onClick={debounce(() => isModalOpen[1](false), 100)}>
							<CloseOutlined style={{ color: "#1619407b" }} />
						</div>
						<img src={codeStart} className="w-168px h-144px ml-30px" alt="" />
						<div>
							<p className="c-#161940ce text-16px">扫码枪已启动</p>
							<p className="c-#161940 text-18px font-700 mt-12px">请使用扫码枪分别扫描入场票和设备码</p>
						</div>
					</section>
				) : (
					<section className="stop w-560px h-202px flex items-center relative">
						<div
							className="absolute right-20px top-16px cursor-pointer"
							onClick={debounce(() => isModalOpen[1](false), 100)}>
							<CloseOutlined style={{ color: "#1619407b" }} />
						</div>
						<img src={codeStop} className="w-168px h-144px ml-30px" alt="" />
						<div>
							<p className="c-#161940ce text-16px">扫码枪未激活</p>
							<p className="c-#FF606B text-18px font-700 mt-12px">扫码功能未激活，请点击激活</p>
							<p className="but mt-22px" onClick={debounce(() => focus_fn(), 1000)}>
								激活扫码枪
							</p>
						</div>
					</section>
				)}
			</div>
		</div>
	);
}
